在CSS中,美化文字可以通過多種方式來呈現,以下是一些常用的CSS屬性和技巧,用於提升文本的美觀度:
font-size
font-size
用於設置文本的字體大小。你可以使用以下單位:
px
(像素)、pt
(點),例如:font-size: 16px;
em
、rem
,例如:font-size: 1.5em;
font-size: 120%;
範例:
p {
font-size: 18px;
}
h1 {
font-size: 2em;
}
font-family
font-family
用於設置文本的字體。通常會指定多個字體,最後是一個通用字體(如serif
、sans-serif
)作為回退。
範例:
body {
font-family: 'Arial', 'Helvetica', sans-serif;
}
font-weight
font-weight
用於設置字體的粗細。常用值有:
normal
(正常)、bold
(加粗)100
至900
(從極細到極粗),例如:font-weight: 700;
範例:
strong {
font-weight: bold;
}
h2 {
font-weight: 600;
}
line-height
line-height
用於設置文本行間距。可以使用數值、百分比、或單位。通常,值為1.5
表示1.5倍的字體大小。
範例:
p {
line-height: 1.6;
}
text-align
text-align
用於設置文本的水平對齊方式。常見值有:
left
right
center
justify
範例:
h1 {
text-align: center;
}
p {
text-align: justify;
}
以上各屬性可組合使用,以控制文本的顯示效果。例如:
article {
font-family: 'Georgia', serif;
font-size: 18px;
font-weight: 400;
line-height: 1.5;
text-align: left;
}
這個例子設置了一篇文章的字體、大小、粗細、行高和對齊方式,達到易讀的排版效果。